<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<!-- tab -->
		<view class="tab-outer">
			<view class="tab" @click="changeTab(index,item)"  :class="{'position':index==0}" v-for="(item,index) in tabList" :key="index">
				<view class="tab-item" :class="{'tabchange':tabindex==index}">
					{{item}}
				</view>
			</view>
		</view>
		<!-- tab==0 -->
		<template v-if="tabindex==0">
			<view   v-if="isNull">
				<!-- 正常不正常 -->
				<view>
					<view>
						<view class="normal">
							<radio-group name="checked" @change="changeRadio">
								<label>
									<radio style="transform:scale(0.7)" :checked="normal"/><text>正常</text>
								</label>
								<label>
									<radio style="transform:scale(0.7)" :checked="!normal"/><text>不正常</text>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="berth" v-for="(item,index) in listMan" :key="index" @click="content(item)">
						<!-- top -->
						<view class="berth-top">
							<view class="left">
								<text>床位：</text>
								<text>{{item.bedName}}</text>
							</view>
							<!-- 有老人外出 -->
							<view class="center" v-if="item.hasOldMan&&!item.outFlag">
								<view class='cu-tag round bg-blue'>外出</view>
							</view>
							<!-- 有老人 -->
							<view class="right" v-if="item.hasOldMan">
								<text>长者:</text>
								<text>{{item.oldManName}}</text>
							</view>
							<view class="right" v-if="!item.hasOldMan">
								<text>空床</text>
							</view>
							
						</view>
						<!-- bot -->
						<view class="berth-bot">
							<textarea disabled v-if="!item.outFlag"  maxlength="50" style="font-size:32rpx;color: #666;" v-model="item.des" placeholder="请输入问题描述" />
							<textarea  v-else maxlength="50" style="font-size:32rpx;color: #666;" v-model="item.des" placeholder="请输入问题描述" />
							<view class="right">
								<!-- showBottomVisible=true -->
								<view @click="kxzChecked(index,item)">
									<text>可选择</text>
									<text class="lg text-gray cuIcon-right"></text>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 140rpx;"></view>
					<view class="submit">
						<button type="primary" @click="submit">提交</button>
					</view>
				</view>
			</view>
			<view v-if="!isNull" class="no-data">
				<view class="inner">
					暂无数据
				</view>
			</view>
		</template>
		<template v-if="tabindex==1">
			<!-- <text class="lg text-gray cuIcon-right"></text> -->
			<view>
				<view class="record">
					<!-- top -->
					<view class="top-time">
						<view class="left view" @click="before">
							<text class="cuIcon-back text-white"></text>
						</view>
						<view class="center">{{queryDate}}</view>
						<view class="right view" @click="after">
							<text class="cuIcon-right text-white"></text>
						</view>
					</view>
				</view>
				<!-- list -->
				<view v-for="(item,index) in recordsList" :key="index" v-if="!showNull" @click="records(item)">
					<view class="breth-time">
						{{item.checkTime}}
					</view>
					<view class="berth">
						<!-- top -->
						<view class="berth-top">
							<view class="left">
								<text>{{item.roomName}}查房记录</text>
							</view>
							<view class="right" v-if="item.checkResult">
								<text style="color: #0081FF;">正常</text>
							</view>
							<view class="right" v-else>
								<text style="color:#FBBD08;">异常</text>
							</view>
						</view>
						<!-- bot -->
						<view class="detail">
							<view class="top">
								<text>备注详情:</text>
								<text>{{item.checkInfo}}</text>
							</view>
							<view class="bottom">
								<text>查房人:</text>
								<text>{{item.employeeName}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="showNull"> 
					暂无数据
				</view>
			</view>
		</template>
		  <section class="Popup-Page">
		<s-popup custom-class="bottom-popup" position="bottom" v-model="showBottomVisible">
			<view class="popup-inner">
				<view class="popup-tp">
					<view @click="showBottomVisible=false">取消</view>
					<view @click="confirm">确定</view>
				</view>
				<checkbox-group>
					<view class="group-item" v-for="(item,index) in remarkLists" :key="index">
						<view class="group-inner" @click="changeRemark(item)">
							{{item.content}}
								<label>
									<checkbox style="transform:scale(0.6)" class='round blue' :class="item.isCheck?'checked':''" :checked="item.isCheck?true:false" value="C"></checkbox>
								</label>
						</view>
					</view>
				</checkbox-group>
			</view>
		</s-popup>
	 </section>
	 
	 
	</view>
</template>

<script>
	import sPopup from '../../../components/s-popup/index.vue';
	export default {
		components: {
		  sPopup
		},
		data() {
			return {
				// 选择的项
				checkIndex:-1,//选择的第几个房间
				title:'', //房间名字
				tabindex:0,//当前tab
				tabList:['查房登记','查房记录'],//頂部tab
				normal:true,//是否正常
				listMan:[],//老人list
				remarkLists:[],//備註list
				isNull:true,//是否為空
				showBottomVisible: false,//底部選擇彈框
				roomId:'',//房間id
				desc:'',//房間檢查的描述
				item:{},//
				teamId:'',//班組id
				// 查房日期
				queryDate:'',//當前日期
				timestamp:'',//當前日期的時間戳
				page:1,//當前頁數，
				total:'',//查房的總的條數
				recordsList:'',//查房記錄list
				showMore:"",//暫無更多
				showNull:false,//暂无数据
			// 当前的时间戳/
			}
		},
		onLoad(options) {
			this.roomId = options.roomId;
			this.title = options.roomName;
			this.getPages();
			this.listOldMan(options.roomId);
			this.teamId = uni.getStorageSync('teamId');
			this.getTimestamp();
		},
		onReachBottom() {
			var _that = this;
			_that.page++;
			if(this.recordsList.length<this.total){
				_that.checkRoom();
			}else{
				_that.showMore = '暂无更多'
			}
		},
		methods: {
			records(item){
				if(item.checkResult){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('时间'+item.checkTime+'分房间'+this.title+'的查房记录显示正常，备注详情信息'+item.checkInfo+'查房人'+item.employeeName,1);
					}
				}else{
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('时间'+item.checkTime+'分房间'+this.title+'的查房记录显示不正常，备注详情信息'+item.checkInfo+'查房人'+item.employeeName,1);
					}
				}
			},
			content(item){
				 if(item.hasOldMan){
					
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('床号'+item.bedName+'入住的长者姓名：'+item.oldManName+'，如有异常，可在下方输入备注信息或选择备注选项后进行提交。',1);
					}	 
				 }else{
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('床号'+item.bedName+'目前暂无长者入住，如有异常，可在下方输入备注信息或选择备注选项后进行提交。',1);
					}	 
				 }
			},
			changeRemark(item){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(item.content,1);
				}
				item.isCheck=!item.isCheck
			},
			before(){
				this.remarkLists = [];
				this.total = ''
				this.timestamp=this.timestamp - 24*60*60*1000;
				this.queryDate = this.timestampToTime(this.timestamp)
				this.checkRoom();				
			},
			after(){
				this.remarkLists = [];
				this.total = ''
				this.timestamp=this.timestamp + 24*60*60*1000;
				this.queryDate = this.timestampToTime(this.timestamp)
				this.checkRoom();	
			},
			timestampToTime(timestamp) {
				var date =new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			 	 let  Y = date.getFullYear() +'年';
				 let M = (date.getMonth() +1 <10 ?'0' + (date.getMonth() +1) : date.getMonth() +1) +'月';
			 	 let D = (date.getDate() <10 ?'0' + (date.getDate()) : date.getDate()) +'日';
				// let D = date.getDate() +'日';
			 	let h = date.getHours() +':';
			 	let m = date.getMinutes() +':';
			  	let s = date.getSeconds();
			    return Y +M +D;//时分秒可以根据自己的需求加上
			},
			getTimestamp(){
					this.timestamp=new Date().getTime();
					this.queryDate = this.timestampToTime(this.timestamp)
			},
			checkRoom(){
				let param = {
					size:999999,
					page:1,
					roomId:this.roomId,
					queryDate:this.queryDate,
					teamId:this.teamId
				}
				this.$http('/care-service/checkRoom/page','get',param).then(res=>{
					if(res.data.code == 200){
						if(res.data.data.records.length==0){
							this.showNull = true;
						}else{
						
							this.recordsList = res.data.data.records
							this.total = res.data.data.total
							this.showNull = false;
						}
					}
				});
			},
			changeRadio(){
				this.normal = !this.normal;
				if(this.normal){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('正常，查房正常的情况下可点击选中该选项；',1);
					}
				}else{
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('不正常，查房发现不正常的情况下课选中该选项。',1);
					}
				}
			},
			confirm(){
				let desc = '';
				this.showBottomVisible = false;
				for(let item of this.remarkLists){
					if(item.isCheck==true){
						desc += item.content;
						desc += ','
					}
				}
				desc = desc.substr(0, desc.length - 1);
				this.desc = desc
					//当前list
				for(let i = 0; i<this.listMan.length;i++){
					this.listMan[this.checkIndex].des = this.desc;
				}
			},
			// 可選擇/
			kxzChecked(index,item){
				if(!item.outFlag&&item.hasOldMan){
					uni.showToast({
					    title: '长者已经外出',
					    duration: 2000
					});
				}else{
					this.desc = '';
					this.checkIndex = index;
					for(let item of this.remarkLists){
						item.isCheck = false;
					}
					this.showBottomVisible=true;
				}
			},
			getPages(){
				this.$http('/care-service/checkRoomRemark/list','get',{}).then(res=>{
					if(res.data.code == 200){
						this.remarkLists = res.data.data;
					}
				});
			},
			// 获取房间
			// /checkRoom/listOldMan
			listOldMan(roomId){
				this.$http('/care-service/checkRoom/listOldMan','get',{roomId:roomId}).then(res=>{
					if(res.data.code==200){
						if(res.data.data.length==0){
							this.isNull = false;
						}else{
							this.isNull = true;
							this.listMan = res.data.data;
							console.log(this.listMan)
							// 描述属性
							for(let item of this.listMan){
								item.des = '';
							}
						}
					}
				});
			},
			// tab
			changeTab(index,item){
				this.tabindex = index;
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(item,1);
				}	
				if(index==1){
					this.checkRoom();
				}
			},
			submit(){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak('提交',1);
				}	
				let params = {}
				params.roomId = this.roomId;
				params.teamId = uni.getStorageSync('teamId')
				params.detail = this.listMan;
				params.checkResult = this.normal
				this.$http('/care-service/checkRoom/getDetail','post',params).then(res=>{
					if(res.data.code==200){
						let item = JSON.stringify(res.data.data);
						let param = JSON.stringify(params)
						uni.navigateTo({
							url:"./card?item="+item+ '&normal=' + this.normal + '&title='+this.title + '&params=' + param
						})
					}
				});
				
			}
		}
	}
</script>
<style scoped lang="scss">
	.submit{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color:#FFFFFF;
		padding: 20rpx 0 30rpx;
		button{
			height: 90rpx;
		}
	}
	.group-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.Popup-Page {
	  padding: 40rpx;
	  .btn {
	    width: 100%;
	    height: 80rpx;
	    font-size: 28rpx;
	    &:not(:first-child) {
	      margin-top: 40rpx;
	    }
	  }
	  .center-popup {
	    .s-popup-wrapper {
	      width: 500rpx;
	      height: 500rpx;
	    }
	    // #ifdef H5
	    /deep/ .s-popup-wrapper {
	      width: 500rpx;
	      height: 500rpx;
	    }
	    // #endif
	  }
	  .left-popup,
	  .right-popup {
	    .s-popup-wrapper {
	      width: 200rpx;
	    }
	    // #ifdef H5
	    /deep/ .s-popup-wrapper {
	      width: 200rpx;
	    }
	    // #endif
	  }
	  .top-popup,
	  .bottom-popup {
	    .s-popup-wrapper {
	      height: 300rpx;
	    }
	    // #ifdef H5
	    /deep/ .s-popup-wrapper {
	      height: 300rpx;
	    }
	    // #endif
	  }
	}
	
	.popup-inner{
		padding:30rpx;
		.popup-tp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #0081FF;
			font-size:34rpx;
			margin-bottom:30rpx;
		}
	}
	.group-item{
		padding:0 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.group-inner{
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}	
	
	
	.no-data{
		background-color: #FFFFFF;
		padding: 30rpx;
		.inner{
			color: #666;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}
	.record{
		margin-top:14rpx;
		padding: 20rpx 150rpx;
		background-color: #fff;
	}
	.top-time{
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.view{
			display: flex;
			justify-content: center;
			align-items: center;
			width:50rpx;
			height: 50rpx;
			background-color: #0081FF;
			border-radius:6rpx;
			
		}
		.left{
			
		}
		.right{
		
		}
	}
	.breth-time{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30rpx;
		height:70rpx;
	}
	.detail{
		padding-left: 30rpx;
		color: #999;
		.top{
			margin:20rpx 0;
		}
		.bottom{
			margin: 0 0 20rpx;
		}
	}
	.tab-outer{
		display: flex;
		align-items: center;
		height:80rpx;
		background-color: #fff;
		.position{
			display: flex;
			justify-content: flex-end;
			margin-right: 30rpx;
		}
		.tab{
			flex: 1;
			height:100%;
			font-size: 32rpx;
			.tab-item{
				width: 40%;
				display: flex;
				justify-content: center;
				height:100%;
				align-items: center;
				border-bottom: 10rpx solid #fff;
			}
			.tabchange{
				color: #FAAD14;
				border-bottom: 10rpx solid #FAAD14;
				font-weight:700;
			}
		}
	}
	.normal{
		display: flex;
		height: 100rpx;
		align-items: center;
		padding: 0 100rpx;
		uni-radio-group{
			width: 100%;
			display: flex;
			uni-label{
				flex: 1;
			}
		}
	}
	.berth-bot{
		display: flex;
		textarea{
			flex: 1;
		}
		.right{
			width:150rpx;
		}
	}
	.berth{
		background-color: #fff;
		padding:20rpx 10rpx;
		padding-top: 0;
		margin-bottom: 20rpx;
		.berth-top{
			font-size: 32rpx;
			padding: 0 20rpx;
			height:70rpx;
			display: flex;
			border-bottom: 1rpx solid #aaaaaa;
			align-items: center;
			.left{
				flex: 1;
			}
			.center{
				width: 120rpx;
			}
			.right{
				text:nth-child(1){
					margin-right: 12rpx;
				}
			}
		}
		.berth-bot{
			padding: 20rpx 40rpx 0;
			.right{
				display: flex;
				justify-content: flex-end;
				margin-left:50rpx;
				view{
					display: flex;
					align-items: flex-start;
				}
			}
			textarea{
				height:130rpx;
			}
		}
	}
	.submit{
		margin-top: 50rpx;
		button{
			margin: 0 40rpx;
		}
	}
</style>
